import { Link, useParams } from "react-router-dom";
import useCartStore from "../../stores/cartStore";

const ProductDetail = () => {
  const { id } = useParams();
  const { addItem } = useCartStore();
  
  // Mock product data
  const product = {
    id: id,
    name: "现代简约沙发",
    price: 2999,
    description: "这款现代简约沙发采用高品质面料和实木框架制作，设计简洁大方，坐感舒适，适合各种家居风格。沙发内部填充高密度海绵，提供良好的支撑性和舒适度。",
    features: [
      "高品质面料，柔软舒适",
      "实木框架，结实耐用",
      "高密度海绵填充，坐感舒适",
      "简约设计，易于搭配",
      "易于清洁和维护"
    ],
    dimensions: "长200cm × 宽90cm × 高80cm",
    material: "优质布料 + 实木框架",
    colorOptions: ["灰色", "米色", "深蓝色"]
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6">
          {/* Product Images */}
          <div>
            <div className="bg-gray-200 h-96 flex items-center justify-center mb-4">
              <span className="text-gray-500 text-lg">商品主图</span>
            </div>
            <div className="grid grid-cols-4 gap-2">
              {[1, 2, 3, 4].map((item) => (
                <div key={item} className="bg-gray-100 h-24 flex items-center justify-center">
                  <span className="text-gray-500 text-sm">图片{item}</span>
                </div>
              ))}
            </div>
          </div>
          
          {/* Product Info */}
          <div>
            <h1 className="text-3xl font-bold mb-4">{product.name}</h1>
            <div className="flex items-center mb-4">
              <div className="flex text-yellow-400">
                {[1, 2, 3, 4, 5].map((star) => (
                  <svg key={star} className="w-5 h-5 fill-current" viewBox="0 0 24 24">
                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                  </svg>
                ))}
              </div>
              <span className="ml-2 text-gray-600">(128条评论)</span>
            </div>
            
            <div className="mb-6">
              <span className="text-3xl font-bold text-blue-600">¥{product.price}</span>
              <span className="ml-4 text-gray-500 line-through">¥{Math.round(product.price * 1.2)}</span>
            </div>
            
            <div className="mb-6">
              <h3 className="text-lg font-semibold mb-2">产品描述</h3>
              <p className="text-gray-700">{product.description}</p>
            </div>
            
            <div className="mb-6">
              <h3 className="text-lg font-semibold mb-2">产品特点</h3>
              <ul className="list-disc list-inside text-gray-700 space-y-1">
                {product.features.map((feature, index) => (
                  <li key={index}>{feature}</li>
                ))}
              </ul>
            </div>
            
            <div className="mb-6">
              <h3 className="text-lg font-semibold mb-2">规格参数</h3>
              <div className="grid grid-cols-2 gap-2 text-gray-700">
                <div className="font-medium">尺寸:</div>
                <div>{product.dimensions}</div>
                <div className="font-medium">材质:</div>
                <div>{product.material}</div>
              </div>
            </div>
            
            <div className="mb-8">
              <h3 className="text-lg font-semibold mb-2">颜色选择</h3>
              <div className="flex gap-3">
                {product.colorOptions.map((color, index) => (
                  <button 
                    key={index}
                    className={`px-4 py-2 rounded border ${
                      index === 0 
                        ? "border-blue-500 bg-blue-50 text-blue-600" 
                        : "border-gray-300 hover:border-gray-400"
                    }`}
                  >
                    {color}
                  </button>
                ))}
              </div>
            </div>
            
            <div className="flex gap-4">
              <Link 
                to={`/user/customization/${id}`} 
                className="flex-1 bg-blue-500 text-white text-center font-semibold py-3 px-6 rounded-lg hover:bg-blue-600 transition duration-300"
              >
                定制此商品
              </Link>
              <button 
                className="flex-1 bg-gray-200 text-gray-800 font-semibold py-3 px-6 rounded-lg hover:bg-gray-300 transition duration-300"
                onClick={() => {
                  addItem({
                    productId: parseInt(id || '1'),
                    name: product.name,
                    price: product.price,
                    quantity: 1,
                    color: "默认",
                    material: product.material,
                    size: "标准"
                  });
                  alert('商品已添加到购物车');
                }}
              >
                加入购物车
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductDetail;